<template>
	<el-drawer
	  v-model="dialog.visible"
	  :title="dialog.title"
	  append-to-body
	  @close="closeDialog"
	  :close-on-click-modal="false"
	  size="750"
	>
		
		<el-form
			ref="formRef"
			:model="formData"
			:rules="formRules"
			label-width="110px"
		>
			
			<el-form-item label="主题名称" prop="name">
				<el-input v-model="formData.name" placeholder="请输入主题名称" />
			</el-form-item>
			
			<el-form-item label="主题前缀" prop="prefix">
				<el-input v-model="formData.prefix" placeholder="请输入主题前缀" />
			</el-form-item>
			
			<el-form-item label="订阅主题" prop="topic">
				<el-input v-model="formData.topic" placeholder="请输入订阅主题" />
			</el-form-item>
			
			<el-form-item label="QoS等级" prop="qos">
			  <el-radio-group v-model="formData.qos" class="flex-container">
			    <el-radio value="0">QoS 0</el-radio>
			    <el-radio value="1">QoS 1</el-radio>
				<el-radio value="2">QoS 2</el-radio>
			  </el-radio-group>
			</el-form-item>
		</el-form>
	
		<template #footer>
		  <div class="dialog-footer">
			<el-button type="primary" @click="submitForm" :loading="loading">确 定</el-button>
			<el-button @click="closeDialog" :loading="loading">取 消</el-button>
		  </div>
		</template>
	</el-drawer>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import type {FormRules } from 'element-plus'
	import { ElMessage } from "element-plus";
	import { reactive } from "vue";
	import { onMounted } from "vue";
	const emit = defineEmits(['success', 'closed']);
	const loading = ref(false);
	const dialog = ref({
		visible:false,
		title:'',
	});
	const rowIndex = ref<number>(1);
	const formRef=ref();
	const formRules=reactive<FormRules>({
		name: [
			{ required: true, message: "请输入主题名称", trigger: "blur" },
			{ min: 2, max: 50, message: "长度在 2 到 50 个字符", trigger: "blur" }
		],
		prefix: [
			{ required: true, message: "请输入主题前缀", trigger: "blur" },
			{ min: 2, max: 50, message: "长度在 2 到 50 个字符", trigger: "blur" }
		],
		topic: [
			{ required: true, message: "请输入订阅主题", trigger: "blur" },
			{ min: 2, max: 50, message: "长度在 2 到 50 个字符", trigger: "blur" }
		],
		qos: [
			{ required: true, message: "请选择QoS等级", trigger: "blur" }
		],
	});
	
	//数据源
	const formData=ref<any>({
	});
	
	async function openDialog(index: number,_row?: any, type?: string) {
		if('add'==type){
			rowIndex.value=index;
			dialog.value.visible=true;
			dialog.value.title='新增参数';
		}else{
			rowIndex.value=index;
			dialog.value.visible=true;
			dialog.value.title='编辑参数';
			formData.value=JSON.parse(JSON.stringify(_row))
		}
	}
	
	const submitForm=()=>{
		formRef.value.validate((isValid: boolean) => {
			if (isValid) {
				loading.value = true;
				emit('success', rowIndex.value, JSON.parse(JSON.stringify(formData.value)));
				loading.value = false;
				closeDialog();
			}
		});
	}
	
	const closeDialog=()=>{
		dialog.value.visible=false;
		dialog.value.title="";
		emit('closed')
		resetForm();
	}
	
	/**
	 * 重置表单
	 */
	function resetForm() {
		formRef.value.resetFields();
		formRef.value.clearValidate();
		formData.value={};
	}	
	
	defineExpose({
	  openDialog,closeDialog
	});
	
	onMounted(() => {
	});
</script>

<style scoped>
	.step-content{
		background-color: aliceblue;
		margin-top: 8px;
		padding: 8px;
		padding-top: 16px;
	}
</style>